<template>
	<view class="buy">
		<view class="title">
			<!-- <image src="../../static/image/travel/matching/buy.png"></image> -->
			<text class="text" style="width: 120rpx;">充值：</text>
			<tn-input v-model="value" type="number" @input="inputChange" :border="false" style="width: 100%;"
				:maxLength="5" />
		</view>
		<view class="number">
			<view class="list">
				<view :class="num == index ? 'item real' : 'item'" v-for="(item, index) in list" :key="index"
					@click="pick(item,index)">
					<view class="card">
						<view class="top">
							<text>送{{ item.gift }}元</text>
							<!-- <image src="../../static/image/travel/matching/buy.png"></image> -->
						</view>
						<text class="money">{{ item.money }}元</text>
					</view>
					<view v-if="index === 3" class="recommend">
						<text>推荐</text>
					</view>
				</view>
			</view>
			<view class="sure">
				<text @click="playShow">确定充值</text>
			</view>
		</view>
		<view class="tip">
			<text class="titl">温馨提示</text>
			<!-- 	<view>
				<text>1、充值即代表已阅读并同意</text>
				<text>《P币充值服务条款》；</text>
			</view> -->
			<view>
				<text>1、请在网络状态良好的情况下进行充值，为了保证充值顺利，请耐心等待充值，不要进行其他操作；</text>
			</view>
			<view>
				<text>2、前往账单记录，可查询充值订单详情和消费详情；</text>
			</view>
			<view style="display: flex;align-items: center;">
				<text>3、在支付过程中遇到任何问题，请联系官方客服：</text>
				<button open-type="contact" style="background: none;font-size: 28rpx;display: block;">小助手</button>
			</view>
		</view>
		<t-pay-way :show="show" :payMoney="value" @pay="pay" @close="popupClose" :one="one"></t-pay-way>
	</view>
</template>

<script>
	import tPayWay from "@/components/t-pay-way/t-pay-way"
	import {
		getRrderRecharge,
		getTradeOrderDetail,
		getShopPayPrepay,
		getRechargeRules
	} from "@/apis/index"
	import string from "../../tuniao-ui/libs/function/string";
	export default {
		components: {
			tPayWay
		},
		data() {
			return {
				one: true,
				show: false,
				value: '',
				num: 0,
				list: [],
			};
		},
		created() {},
		async onLoad(option) {
			await this.getRecgarge()
			if (option.num && option.index) {
				this.num = option.index;
				this.value = option.num
			} else {
				this.value = this.list[0].money
			}

		},
		methods: {
			async getRecgarge() {
				let res = await getRechargeRules()
				console.log(res, '-------------------------')
				this.list = res.data.quick_amounts
			},
			inputChange(e) {
				let _this = this

				this.list.forEach((item, index) => {
					if (Number(item.money) === Number(e)) {

						_this.$nextTick(() => {
							// 在这里可以确保视图已经更新，可以进行一些后续操作
							_this.$set(_this, 'num', index);
							_this.num = index
						});
						return;
					} else {
						_this.$set(_this, 'num', null);
						return;
					}
				});


				// for (let i = 0; i < this.list.length; i++) {
				// 	if (Number(this.list[i].money) == Number(e)) {
				// 		_this.num= i
				// 	}else{
				// 		_this.num=null
				// 	}
				// }
			},
			pick(item, index) {
				this.num = index;
				this.value = item.money
			},
			playShow() {
				this.show = true
			},
			popupClose() {
				this.show = false
			},
			pay(e) {
				getRrderRecharge({
					recharge_money: this.value
				}).then(res => {
					let order_sn = res.data.order_sn
					getTradeOrderDetail(res.data.order_sn).then(res => {
						let obj = {
							order_sn: order_sn,
							payment: "wechat"
						}
						getShopPayPrepay(obj).then(res => {
							if (res.data == -1 && res.msg == 'miss_openid') {
								uni.showModal({
									title: '微信支付',
									content: '请先绑定微信再使用微信支付',
									success: function(res) {
										if (res.confirm) {
											postWechatBind().then(res => {
												uni.showToast({
													title: res.msg,
													icon: 'none'
												})
											})
										}
									},
								});
							}

							if (res.code == 1) {
								// #ifdef MP-WEIXIN
								uni.requestPayment({
									provider: 'wxpay',
									...res.data.pay_data,
									success: (res) => {
										// that.payResult('success');
										uni.showToast({
											title: '支付成功',
											icon: 'none'
										})
									},
									fail: (err) => {
										if (err.errMsg ===
											'requestPayment:fail cancel') {
											uni.showToast({
												title: '取消支付',
												icon: 'none'
											})
										} else {
											// that.payResult('fail');
										}
									},
								});
								// #endif


							}

						})
					})

				})
			},
		},
	};
</script>

<style lang="scss" scoped>
	.buy {
		width: 100%;
		height: 100%;

		.title {
			display: flex;
			align-items: center;
			padding: 42rpx 30rpx 20rpx 50rpx;
			background-color: #ffffff;

			>image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 6rpx;
			}

			>text {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 40rpx;
			}

			.num {
				color: #ff4141;
			}
		}

		.number {
			width: 100%;
			height: 940rpx;
			background-color: #ffffff;
			margin-top: 18rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				padding: 38rpx 40rpx 66rpx 40rpx;

				.item {
					width: 194rpx;
					height: 194rpx;
					background: #ffffff;
					box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(0, 0, 0, 0.1);
					border-radius: 20rpx;
					margin-bottom: 44rpx;
					display: flex;

					.card {
						width: 194rpx;
						height: 194rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.top {
							display: flex;
							align-items: center;

							>text {
								font-size: 32rpx;
								font-family: PingFangSC-Semibold, PingFang SC;
								font-weight: 600;
								color: #666666;
								line-height: 44rpx;
								margin-right: 12rpx;
							}

							>image {
								width: 30rpx;
								height: 30rpx;
							}
						}

						.money {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							line-height: 34rpx;
							margin-top: 12rpx;
						}
					}

					.recommend {
						width: 112rpx;
						height: 36rpx;
						background: #f3f2ea;
						border-radius: 8rpx 0rpx 8rpx 0rpx;
						position: absolute;
						text-align: center;
						margin-top: -18rpx;

						>text {
							font-size: 20rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #666666;
							line-height: 36rpx;
						}
					}
				}

				.real {
					border: 2rpx solid #f88700;
				}

				&:after {
					content: '';
					width: 194rpx;
				}
			}

			.sure {
				width: 582rpx;
				height: 80rpx;
				background: #ff6a5f;
				border-radius: 40rpx;
				text-align: center;

				>text {
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 600;
					color: #ffffff;
					line-height: 80rpx;
				}
			}
		}

		.tip {
			height: 394rpx;
			background: #ffffff;
			margin-top: 18rpx;
			padding: 40rpx;

			.titl {
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #666666;
				line-height: 40rpx;
				margin-bottom: 6rpx;
			}

			>view {
				>text {
					font-size: 22rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					color: #999999;
					line-height: 32rpx;
				}

				&:nth-child(2) {
					>text:nth-child(2) {
						color: #333333;
					}
				}

				&:nth-child(5) {
					>text:nth-child(2) {
						color: #ff6a5f;
						font-weight: 600;
						border-bottom: 2rpx solid #ff6a5f;
					}
				}
			}
		}
	}
</style>